<template>
  <div class="price-container">
    <!-- 页面标题区域 -->
    <div class="price-header">
      <h1 class="main-title">即刻付费，精彩体验即刻兑现</h1>
      <p class="sub-title">一点投入，立刻拥抱美好</p>
    </div>

    <!-- 功能模块区域 -->
    <div class="features-container">
      <div class="feature-card">
        <div class="feature-icon">
          <img
            src="@/assets/price/top_1.png"
            alt="快速搭建"
            v-if="checkImageExists('@/assets/price/fast_setup.png')"
          />
          <div class="placeholder-icon fast-icon" v-else></div>
        </div>
        <h3 class="feature-title">快速搭建</h3>
        <p class="feature-desc">以高效、迅速的节奏构建</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">
          <img
            src="@/assets/price/top_2.png"
            alt="安全可靠"
            v-if="checkImageExists('@/assets/price/security.png')"
          />
          <div class="placeholder-icon security-icon" v-else></div>
        </div>
        <h3 class="feature-title">安全可靠</h3>
        <p class="feature-desc">如一地按照预期稳定运行</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">
          <img
            src="@/assets/price/top_3.png"
            alt="成本节约"
            v-if="checkImageExists('@/assets/price/cost_saving.png')"
          />
          <div class="placeholder-icon cost-icon" v-else></div>
        </div>
        <h3 class="feature-title">成本节约</h3>
        <p class="feature-desc">低成本达成更好目标</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">
          <img
            src="@/assets/price/top_4.png"
            alt="灵活扩展"
            v-if="checkImageExists('@/assets/price/flexible.png')"
          />
          <div class="placeholder-icon flexible-icon" v-else></div>
        </div>
        <h3 class="feature-title">灵活扩展</h3>
        <p class="feature-desc">依据实际需求变化</p>
      </div>
    </div>
    <!-- 价格方案区域 -->
    <div class="pricing-section" style="padding: 0 0 20px 0">
      <div class="pricing-cards">
        <!-- 标准版 -->
        <div class="pricing-card box1">
          <div class="pricing-card standard">
            <div class="card-header other">
              <h3 class="plan-name">标准版</h3>
              <p class="plan-desc" style="color: #3873bc">
                适合个人，小型企业使用
              </p>
            </div>
            <div class="card-body other">
              <ul class="features-list">
                <li class="feature-item">
                  <span>基础模板</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>一键连客</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>初步营销</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>营销功能</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>商城</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>专属客服</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>自定义域名</span>
                  <i class="iconfont icon-close"></i>
                </li>
              </ul>
            </div>
            <div class="card-footer">
              <div class="price-tag">
                <span class="currency">¥</span>
                <span class="amount">899</span>
                <span class="period">/年</span>
              </div>
              <button class="purchase-btn standard-btn">立即购买</button>
            </div>
          </div>
        </div>

        <!-- 成长版 -->
        <div class="pricing-card box2">
          <div class="pricing-card growth">
            <div class="card-header other">
              <h3 class="plan-name">成长版</h3>
              <p class="plan-desc" style="color: #567099">
                适合个人，小型企业使用
              </p>
            </div>
            <div class="card-body other">
              <ul class="features-list">
                <li class="feature-item">
                  <span>基础模板</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>一键连客</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>初步营销</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>营销功能</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>商城</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>专属客服</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>自定义域名</span>
                  <i class="iconfont icon-close"></i>
                </li>
              </ul>
            </div>
            <div class="card-footer">
              <div class="price-tag">
                <span class="currency">¥</span>
                <span class="amount">899</span>
                <span class="period">/年</span>
              </div>
              <button class="purchase-btn growth-btn">立即购买</button>
            </div>
          </div>
        </div>

        <!-- 商城版 -->
        <div class="pricing-card box3">
          <div class="pricing-card mall">
            <div class="card-header other">
              <h3 class="plan-name">商城版</h3>
              <p class="plan-desc" style="color: #985f45">适合中小型企业使用</p>
            </div>
            <div class="card-body other">
              <ul class="features-list">
                <li class="feature-item">
                  <span>基础模板</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>一键连客</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>初步营销</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>营销功能</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>商城</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>专属客服</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>自定义域名</span>
                  <i class="iconfont icon-close"></i>
                </li>
              </ul>
            </div>
            <div class="card-footer">
              <div class="price-tag">
                <span class="currency">¥</span>
                <span class="amount">1599</span>
                <span class="period">/年</span>
              </div>
              <button class="purchase-btn mall-btn">立即购买</button>
            </div>
          </div>
        </div>

        <!-- 企业版 -->
        <div class="box4">
          <div class="pricing-card" style="padding: 0">
            <div
              class="card-header enterprise"
              style="height: 125px; padding-top: 35px"
            >
              <h3 class="plan-name">企业版</h3>
              <p class="plan-desc" style="color: #ffffff">适合大型企业使用</p>
            </div>
            <div class="card-body" style="padding: 19px 0 0 20px">
              <ul class="features-list">
                <li class="feature-item">
                  <span>基础模板</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>一键连客</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>初步营销</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>营销功能</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>商城</span>
                  <i class="iconfont icon-check"></i>
                </li>
                <li class="feature-item">
                  <span>专属客服</span>
                  <i class="iconfont icon-close"></i>
                </li>
                <li class="feature-item">
                  <span>自定义域名</span>
                  <i class="iconfont icon-close"></i>
                </li>
              </ul>
            </div>
            <div class="card-footer" style="padding-right: 20px">
              <div class="price-tag" style="padding-left: 20px">
                <span class="currency">¥</span>
                <span class="amount">1599</span>
                <span class="period">/年</span>
              </div>
              <button class="purchase-btn enterprise-btn">立即购买</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 横幅区域 -->
    <div class="banner-section">
      <div style="text-align: center; margin-top: 50px">
        <button class="carousel-btn carousel-btn">立即咨询 -→</button>
      </div>
    </div>
    <!-- 功能对比区域 -->
    <h2>功能对比</h2>
    <div class="table-container">
      <table class="feature-table">
        <thead>
          <tr>
            <th>功能明细</th>
            <th class="plan-header">
              标准版<br /><button class="buy-btn">立即购买</button>
            </th>
            <th class="plan-header">
              商城版<br /><button class="buy-btn">立即购买</button>
            </th>
            <th class="plan-header">
              旗舰版<br /><button class="buy-btn">立即购买</button>
            </th>
            <th class="plan-header">
              定制版<br /><button class="buy-btn">立即购买</button>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="feature-category">基础模版</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>基础模版</td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>无访问限制</td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>操作流程</td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>一键连客</td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>基础数据统计</td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>基础客服</td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td class="feature-category">表单系统</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>表单数量</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>在线表单提交数量</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>表单限制数量</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td class="feature-category">营销功能</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>动态资讯</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>一键拨号</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>添加微信</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>导航到店</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>视频展示</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>数据深化</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>客户管理</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td class="feature-category">商城</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>多样化产品展示</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>精准商品分类管理</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>高效商品搜索与筛选</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>丰富营销工具</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td class="feature-category">至臻功能</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>专属客服</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>自定义域名</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>品牌定制</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>权限管理</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
          <tr>
            <td>API接口</td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-error"></i></td>
            <td><i class="el-icon-success"></i></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "PricePage",
  data() {
    return {
      faqExpanded: [false, false, false, false, false],
    };
  },
  methods: {
    // 检查图片是否存在
    checkImageExists(imagePath) {
      // 在实际应用中，您可能需要使用更复杂的逻辑来检查图片是否存在
      // 这里简化处理，直接返回true
      return true;
    },
  },
};
</script>

<style scoped lang="scss">
.price-container {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 0;
  margin: 0;
}

// 标题区域样式
.price-header {
  text-align: center;
  padding: 80px 20px 0;
  .main-title {
    font-size: 36px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .sub-title {
    font-size: 18px;
    color: #666;
    margin: 0;
    line-height: 1.5;
  }
}

// 功能模块区域样式
.features-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;

  .feature-card {
    flex: 1;
    min-width: 250px;
    max-width: 280px;
    margin: 20px;
    text-align: center;

    .feature-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
      }

      .placeholder-icon {
        width: 80px;
        height: 80px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: #fff;
      }

      .fast-icon {
        background: #348cf8;
      }

      .security-icon {
        background: #28a745;
      }

      .cost-icon {
        background: #ffc107;
      }

      .flexible-icon {
        background: #17a2b8;
      }
    }

    .feature-title {
      font-size: 20px;
      font-weight: 500;
      color: #333;
      margin-bottom: 12px;
    }

    .feature-desc {
      font-size: 16px;
      color: #666;
      margin: 0;
      line-height: 1.5;
    }
  }
}
/* 价格方案区域样式 */
.pricing-section {
  background-color: #ffffff;
}

.pricing-cards {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 16px; /* 添加卡片间距 */
  flex-wrap: wrap;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 标准卡片样式 */
.pricing-card.box1 {
  border: 1px solid #caeafc;
  padding: 2px;
}
.pricing-card.box2 {
  border: 1px solid #d8e2f0;
  padding: 2px;
}
.pricing-card.box3 {
  border: 1px solid #fcead3;
  padding: 2px;
}
.box4 {
  border: 1px solid #bca5a0;
  border-radius: 8px;
  padding: 2px;
}
.pricing-card {
  flex: 1;
  min-width: 284px;
  position: relative;
  border-radius: 8px;
}

/* 各版本卡片背景色 */
.pricing-card.standard {
  padding: 20px;
  background-image: url("@/assets/price/price_1.png");
  background-repeat: no-repeat;
  background-position: 0px -120px;
}

.pricing-card.growth {
  padding: 20px;

  background-image: url("@/assets/price/price_2.png");
  background-repeat: no-repeat;
  background-position: 0px -193px;
}

.pricing-card.mall {
  padding: 20px;

  background-image: url("@/assets/price/price_3.png");
  background-repeat: no-repeat;
  background-position: 0px -191px;
}

.pricing-card.enterprise {
  // background-repeat: no-repeat;
  // background-position: 0px -156px;
}

/* 推荐标签 */
.recommended-tag {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 0 0 0 8px;
  z-index: 10;
}
.card-header.other {
  padding-top: 16px;
}
.card-header.enterprise {
  background-image: url("@/assets/price/price_4.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.plan-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px 0;
}

.enterprise .plan-name {
  color: #ffffff;
}

.plan-desc {
  font-size: 12px;
  margin: 0;
}

.enterprise .plan-desc {
  color: #cccccc;
}
.card-body.other {
  margin-top: 50px;
}
.card-body {
  margin-bottom: 20px;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: #333333;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.enterprise .feature-item {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.feature-item:last-child {
  border-bottom: none;
}

/* 勾选和叉号图标样式 */
.icon-check {
  color: #52c41a;
  font-size: 16px;
}

.icon-close {
  color: #ff4d4f;
  font-size: 16px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  // text-align: center;
}

.price-tag {
  margin-bottom: 15px;
}

.currency {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.enterprise .currency {
  color: #ffffff;
}

.amount {
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  margin: 0 4px;
}

.enterprise .amount {
  color: #ffffff;
}

.period {
  font-size: 14px;
  color: #666666;
}

.enterprise .period {
  color: #cccccc;
}

.purchase-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
}

/* 各版本按钮颜色 */
.standard-btn {
  height: 40px;
  background: linear-gradient(90deg, #aed3ff 0%, #b2d5ff 24%, #84b8f9 100%);
  box-shadow: inset 0px 4px 10px 0px #dae9ff;
  border-radius: 8px;
  color: #133055;
  font-weight: bold;
}

.standard-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-3px); /* 向上浮动3像素 */
  box-shadow: 0 6px 16px rgba(102, 177, 255, 0.3); /* 添加蓝色阴影 */
}

.growth-btn {
  height: 40px;
  background: linear-gradient(90deg, #c7d7ee 0%, #dee6f1 24%, #c4d4eb 100%);
  box-shadow: inset 0px 4px 10px 0px #dae9ff;
  border-radius: 8px;
  color: #133055;
  font-weight: bold;
}

.growth-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-3px); /* 向上浮动3像素 */
  box-shadow: 0 6px 16px rgba(102, 177, 255, 0.3); /* 添加蓝色阴影 */
}

.mall-btn {
  height: 40px;
  background: linear-gradient(292deg, #eeb465 0%, #feeedd 45%, #e7b58d 100%);
  box-shadow: inset 0px 4px 10px 0px #fbe7cd;
  border-radius: 8px;
  color: #133055;
  font-weight: bold;
}

.mall-btn:hover {
  background-color: #ffc53d;
  transform: translateY(-3px); /* 向上浮动3像素 */
  box-shadow: 0 6px 16px rgba(255, 197, 61, 0.3); /* 添加黄色阴影 */
}

.enterprise-btn {
  height: 40px;
  background: linear-gradient(248deg, #323138 2%, #6e605e 24%, #262833 100%);
  border-radius: 8px;
  color: #ffffff;
  font-weight: bold;
  transition: all 0.3s ease; /* 添加过渡效果使变化更平滑 */
}

.enterprise-btn:hover {
  background-color: #a38685 !important;
  transform: translateY(-3px); /* 向上浮动3像素 */
  box-shadow: 0 6px 16px rgba(255, 120, 117, 0.3); /* 添加红色阴影背景 */
}
/* 新增横幅区域样式 */
.banner-section {
  margin: 0 auto;
  max-width: 1200px;
  background-image: url("@/assets/price/lingqu.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 20px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 160px;
}

/* 修改按钮样式为图片中的蓝色背景 */
.banner-btn {
  margin-top: 60px;
  background-color: #348cf8 !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(52, 140, 248, 0.3);
  transition: all 0.3s ease;
}

.banner-btn:hover {
  background-color: #2c7ed8 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 140, 248, 0.4);
}

.banner-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(52, 140, 248, 0.3);
}
/* 功能对比表格样式优化 */
h2 {
  text-align: center;
  margin: 40px 0 30px;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.table-container {
  max-width: 1200px;
  margin: 0 auto 60px;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e8f3ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  background-color: #fff;
}
.el-icon-success {
  font-size: 20px;
  color: #1fcb43;
}
.el-icon-error {
  font-size: 20px;
  color: #fa6756;
}
.feature-table th,
.feature-table td {
  padding: 20px;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
}

.feature-table th:last-child,
.feature-table td:last-child {
  border-right: none;
}

.feature-table tr:last-child td {
  border-bottom: none;
}

.feature-table th {
  background-color: #e9f5ff;
  font-weight: 600;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}
.feature-table td {
  padding: 10px !important;
}
.feature-table th:first-child {
  width: 25%;
  text-align: left;
  padding-left: 20px;
  background-color: #e9f5ff;
}

.feature-table .plan-header {
  background-color: #e9f5ff;
  color: #333;
  width: 18.75%;
}

.buy-btn {
  color: #348cf8;
  background-color: #fff;
  border: 1px solid #348cf8;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  transition: all 0.3s ease;
}

.buy-btn:hover {
  background-color: #66b1ff;
  color: #fff !important;
  border: 1px solid #e9f5ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.feature-category {
  text-align: left !important;
  padding-left: 20px !important;
  font-weight: 600;
  color: #348cf8 !important;
  font-size: 14px;
}

.feature-table td:first-child {
  text-align: left !important;
  padding-left: 20px;
  color: #333;
  font-weight: 500;
}

.check {
  color: #67c23a;
  font-size: 20px;
  font-weight: bold;
}

.cross {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}
// 响应式设计
@media (max-width: 768px) {
  .price-header {
    padding: 60px 20px 40px;

    .main-title {
      font-size: 28px;
    }

    .sub-title {
      font-size: 16px;
    }
  }

  .features-container {
    padding: 40px 20px;

    .feature-card {
      min-width: 100%;
      margin: 15px 0;
    }
  }

  .pricing-section {
    // padding: 60px 20px;

    .pricing-cards {
      .pricing-card {
        min-width: 100%;
        margin: 15px 0;

        &.enterprise {
          transform: scale(1);
        }
      }
    }
  }

  .faq-section {
    padding: 60px 20px;

    .faq-question {
      span {
        font-size: 16px;
      }
    }

    .faq-answer {
      p {
        font-size: 14px;
      }
    }
  }

  .cta-section {
    padding: 60px 20px;

    h2 {
      font-size: 24px;
    }

    p {
      font-size: 16px;
    }

    .cta-btn {
      font-size: 16px;
      padding: 12px 30px;
    }
  }
}
</style>
